<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">角色管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="角色名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
				  <table class="table table-hover">
					<thead>
						<tr>
						    <th>序号</th>
							<th>角色名称</th>
							<th>备注</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>创建用户</th>
							<th>修改用户</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					   <tr><td colspan="8">数据正在加载中....</td></tr>
					</tbody>
				  </table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">

			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){//jquery中的页面加载完成以后要执行的函数
		//借助jquery中的load异步加载函数,加载doPageUI这个资源,并将资源呈现在pageId位置
		// $("#pageId").load("doPageUI",function(){//callback
        //    //doPageUI 对应的资源加载完成以后执行
		// 	doGetObjects();//通过此函数异步加载服务端的角色信息
		// });
		//上面写法的简化形式
		$("#pageId").load("doPageUI",doGetObjects);
		$(".input-group-btn")
				.on("click",".btn-search",doQueryObjects)
		        .on("click",".btn-add",doLoadEditUI)
	})
	function doFindById(id){
		//debugger
		let url=`/role/doFindById/${id}`;
		$.getJSON(url,(result)=>{
			//debugger
			$("#mainContentId").data("rowData",result.data);
			doLoadEditUI()
		})
	}
	//加载角色编辑页面
	function doLoadEditUI(){
		let url="/role/role_edit";
		$("#mainContentId").load(url);
	}
	//处理查询按钮的点击事件
	function doQueryObjects(){
		//初始化当前页码值
        $("#pageId").data("pageCurrent",1);
        //执行查询操作
		doGetObjects();
	}
	//页面加载完成以后通过此函数进行分页查询操作
	function doGetObjects(){
		//debugger
		//1.定义请求的url
		let url="/role/doFindPageObjects";
		//2.定义请求参数
		let pageCurrent=$("#pageId").data("pageCurrent");
		if(!pageCurrent)pageCurrent=1;
		let params={pageCurrent:pageCurrent}
		let roleName=$("#searchNameId").val();
		if(roleName)params.name=roleName;
		//3.发送异步请求获取角色相关数据并局部更新到页面上
		// $.getJSON(url,params,function(result){//服务端的响应结果为字符串,js函数将字符串转换为JS对象
		// 	//console.log(result);//这里的result对应服务端的JsonResult对象
		// 	doHandleQueryResponseResult(result);
		// })
		//上面写法的简化写法
		$.getJSON(url,params,doHandleQueryResponseResult);
	}
	//处理查询结果
	function doHandleQueryResponseResult(result){//JsonResult
          //1.取出响应状态
		   let state=result.state;
		  //2.基于状态值进行正常和异常响应结果的处理
		   if(state==1){//服务端响应了正常数据
              //呈现正常响应结果
			  //1 列表数据的呈现
			   doSetTableBodyRows(result.data.records);//result.data.records
			  //2 分页数据的呈现
			   doSetPagination(result.data);//result.data===pageObject
		   }else{//服务端响应的异常数据
              //呈现异常影响结果
			  //alert(result.message);
			   doSetErrors(result.message);
		   }
	}
	//设置错误信息
	function doSetErrors(message){
		//获取thead中列(th)的数量
		let columnCount=$("thead>tr>th").length;
		//tbody中呈现错误信息
        $("#tbodyId").html(`<tr><td colspan="${columnCount}">${message}</td></tr>`);
	    //初始化page页面
		doSetPagination({rowCount:0,pageCount:0,pageCurrent:1});
	}

	//呈现列表数据
	function doSetTableBodyRows(records){//records为服务端返回的列表数据
         //1.获取tbody对象并清空原有数据
		   let tBody=$("#tbodyId");
		   tBody.empty();//jquery中清除对象内部数据的函数
		 //2.迭代records数组并将其内容追加到tBody中
		   //for(let i=0;i<records.length;i++){}
		   records.forEach(function(item,i){//item为数组中的一条记录
             tBody.append(doCreateRow(item,i));
		   })
	}
	function doCreateRow(item,i){
		return  `<tr><td>${i+1}</td>
                        <td>${item.name}</td>
                        <td>${item.note}</td>
                        <td>${item.createdTime}</td>
                        <td>${item.modifiedTime}</td>
                        <td>${item.createdUser}</td>
                        <td>${item.modifiedUser}</td>
                        <td><button type="button" onclick="doFindById(${item.id})">update</button></td>
                 </tr>`
	}
</script>
